<template>
  <div class="app-container">
    <!-- 搜索栏 -->
    <el-form :inline="true" :model="searchMap.data" class="demo-form-inline">
      <el-form-item>
        <el-input
          v-model="searchMap.data.categoryId"
          placeholder="分类ID"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search()">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button
          type="success"
          @click="addCont()
          "
          >广告添加</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-button type="warning" @click="delBatch()">批量删除</el-button>
      </el-form-item>
    </el-form>
    <!-- 内容列表 -->
    <el-table
      ref="multipleTable"
      :data="contentList"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="id" label="广告ID" width="120"> </el-table-column>
      <el-table-column prop="categoryId" label="分类ID"></el-table-column>
      <el-table-column prop="title" label="标题"></el-table-column>
      <el-table-column
        prop="url"
        label="URL"
        show-overflow-tooltip="true"
      ></el-table-column>
      <el-table-column prop="pic" label="图片">
        <template slot-scope="scope">
          <img
            :src="scope.row.pic"
            style="max-height: 50px; max-width: 200px"
          />
        </template>
      </el-table-column>
      <el-table-column prop="sortOrder" label="排序"></el-table-column>
      <el-table-column prop="status" label="是否有效">
        <template slot-scope="scope">
          <span v-if="scope.row.status == 1">有效</span>
          <span v-if="scope.row.status == 0">无效</span>
        </template>
      </el-table-column>
      <el-table-column prop="" label="操作">
        <template slot-scope="scope">
          <div>
            <el-button
              type="primary"
              icon="el-icon-edit"
              @click="editTable(scope.row)"
              >修改</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="block">
      <el-pagination
      style="float: right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchMap.page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 添加 -->
    <el-dialog
      :title="content.id ? '广告修改' : '广告添加'"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
    >
      <el-form :model="content">
        <el-form-item label="广告分类">
          <el-select v-model="content.categoryId" placeholder="请选择">
            <el-option
              v-for="item in contentCatArr"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标题">
          <el-input v-model="content.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="URL">
          <el-input v-model="content.url" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="content.sortOrder" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="广告图片">
          <el-upload
            :headers=this.headers
            ref="upload"
            action="http://localhost:8080/upload"
            list-type="picture-card"
            name="headerImage"
            :on-success="uploadSuccess"
          >
            <img :src="this.content.pic" />
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="是否有效">
        
          <el-radio v-model="content.status" label="1">有效</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveDate()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { search, get, save, del } from "@/api/content";
import template from "./template.vue";
export default {
  components: { template },
  data() {
    return {
      header:{},
      searchMap: {
        page: 1,
        limit: 5,
        data: {},
      },
      contentList: [], //列表数据
      total: 0,
      dialogFormVisible: false,
      content: {}, //实体
      contentCatArr: [], //所有分类
      ids:[]//ids

    };
  },
  methods: {
    addCont(){
            this.dialogFormVisible = true;
            this.headers={'token':sessionStorage.getItem('token')}
            this.content = {};
    },
    //   列表
    searchTable() {
      search(this.searchMap).then((res) => {
        this.contentList = res.data;
        this.total = res.total;
      });
    },
    // 搜索
    search() {
      var _this = this;
      search(this.searchMap).then((res) => {
        //console.log(res.data);
        _this.contentList = res.data;
        //_this.entity = res.data;
        _this.total = res.total;
      });
    },
    //所有分类
    getAll() {
      get().then((res) => {
        this.contentCatArr = res.data;
      });
    },
    //修改
    editTable(row) {
      this.dialogFormVisible = true;
      this.content = row;
      this.$nextTick(()=>{
      this.$refs.Upload.clearFiles();//清空图片
       });
      
    },
    //保存
    saveDate() {
      var status = this.content.status;
      if (status == null || status == "") {
        this.content.status = 0;
      }
      save(this.content).then((res) => {
        if (res.success) {
          this.searchTable();
          this.$message({
            showClose: true,
            message: res.msg,
            type: "success",
          });
        } else {
          this.$message({
            showClose: true,
            message: res.msg,
            type: "error",
          });
        }
        this.dialogFormVisible = false;
      });
    },
    //批量删除
    handleSelectionChange(val) {
        var _this=this
      this.content = val;
      this.content.forEach(item => {
          _this.ids.push(item.id)
      });
    },
    delBatch() {
      del(this.ids).then((res) => {
        if (res.success) {
          this.searchTable();
          this.$message({
            showClose: true,
            message: res.msg,
            type: "success",
          });
        } else {
          this.$message({
            showClose: true,
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    uploadSuccess(response, file, fileList) {
      this.content.pic = response.data;
    },
    handleSizeChange(size) {
      this.searchMap.limit = size;
      this.searchTable();
    },
    handleCurrentChange(currentPage) {
      this.searchMap.page = currentPage;
      this.searchTable();
    },
  },
  created() {
    this.searchTable();
    this.getAll();
  },
};
</script>